<template>
	<div class="pane-container">
		<div class="title">
			<h1>
				<slot v-if="slots.title" name="title"></slot>
				<template v-else>
					{{ props.title }}
				</template>
			</h1>
		</div>
		<div class="box">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useSlots } from 'vue';

const props = defineProps({
	title: String,
});

const slots = useSlots();
</script>

<style scoped lang="scss">
.pane-container {
	.title {
		margin-bottom: 20px;
		h1 {
			font-weight: 500;
			font-size: 22px;
			line-height: 40px;
			color: var(--text-color-3);
		}
	}
}
</style>
